<template>
  <view class='HomeNav-container'>
    <view class="navbar" v-if="topBar.style === 'custom'">
      <view class="statusbar" :style="{height: topBar.statusBarHeight+'px'}"></view>
      <view class="flex h vc" :style="{height: topBar.navbarHeight+'px'}">
        <view @click="toSelectLocal" class="local-container left">
          <view class="local">
            {{ selectedLocation.name }}
          </view>
        </view>
        <SearchInput :hot="hot" class="f1" :style="{'margin-right': menuButtonInfoWidth + 'px'}"></SearchInput>
        <view @click="clickCarType" class="local-container left" v-if="!menuButtonInfoWidth">
          <view class="local">
            {{ carTypeStr }}
            <image src="@/static/black_jiantou.png" class="icon"/>
          </view>
        </view>
      </view>
    </view>
    <view :class="['title-container', topBar.style]">
      <view :class="['tab', tabIndex === i?'active':'']" v-for="(tab, i) in tabs" :key="tab.label" @click="select(i)">
        {{ tab.label }}
        <view class="line" v-if="tabIndex === i"></view>
      </view>
      <template v-if="topBar.style !== 'custom'">
        <view class="f1"></view>
        <view @click="toSelectLocal" class="local-container right">
          <view class="local">
            {{ selectedLocation.name }}
          </view>
          <image class="arrow" src="@/static/black_jiantou.png" mode="widthFix"></image>
        </view>
      </template>
    </view>
    <TiyanDialog :nav="true"></TiyanDialog>
    <CarTypeDialog ref="CarTypeDialog"></CarTypeDialog>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'
import SearchInput from "@/pages/home/SearchInput.vue";
import {rpx2px} from "@/libs/utils";
import CarTypeDialog from "@/components/CarTypeDialog.vue";
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  name: 'HomeNavBar',
  components: {TiyanDialog, CarTypeDialog, SearchInput},
  props: ['tabIndex', 'tabs', 'hot'],
  computed: {
    ...mapGetters(['topBar', 'selectedLocation', 'carTypeStr'])
  },
  options: {
    styleIsolation: "shared"
  },
  data() {
    return {
      menuButtonInfoWidth: 0,
    }
  },
  created() {
    // #ifdef MP-WEIXIN
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.menuButtonInfoWidth = menuButtonInfo.width + rpx2px(46)
    console.log('menuButtonInfo', menuButtonInfo)
    // #endif
    // #ifndef MP-WEIXIN
    this.menuButtonInfoWidth = 0
    // #endif
  },
  methods: {
    select(i) {
      this.$emit('changeTab', {detail: {current: i}})
    },
    clickCarType() {
      this.$refs.CarTypeDialog.open()
    },
    toSelectLocal() {
      uni.navigateTo({url: '/pages/select_local/select_local'})
    }
  }
}
</script>

<style scoped lang='scss'>
.HomeNav-container {
  z-index: 1;
  .navbar {
  }

  .title-container {
    width: 100%;
    display: flex;
    height: 90rpx;

    &.custom {
      height: 80rpx;

      .tab {
        flex: 1;
      }
    }
  }

  .local-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;

    &.right {
      margin-right: 60rpx;
      width: 140rpx;
    }

    &.left {
      padding: 0 36rpx;
    }

    .local {
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 16px;
      overflow: hidden;
      text-align: right;
      color: #000;
      .icon {
        width: 12rpx;
        height: 22rpx;
        margin-right: 10rpx;
        margin-left: 15rpx;
        transform: rotate(90deg);
      }
    }

    .arrow {
      position: absolute;
      width: 10rpx;
      right: -20rpx;
      transform: rotate(90deg);
    }
  }

  .tab {
    width: 90rpx;
    padding: 0 30upx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 300ms;

    font-size: 18px;
    color: #9f9f9f;

    .line {
      background-color: rgba(63, 99, 248, 1);
      width: 40rpx;
      height: 6rpx;
      border-radius: 6rpx;
      position: absolute;
      bottom: 0;
    }

    &.active {
      color: #000;
      font-weight: bold;
    }
  }
}

</style>
